<template>
  <div class="content-container">
    <multiple-site-tree @furn="sitetreeshow=!sitetreeshow" ref="tree"/>
    <div class="ml-tree" :class="sitetreeshow?'mainPadding':'hide'">
      <el-card class="box-card searchCard" shadow="never">
        <div class="searchParameter">
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-width="68px"
            size="small"
          >
            <el-form-item label="预警类型" prop="name1">
              <el-select v-model="queryParams.value1" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchBtn">
          <div class="styleBtn">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
            <el-button type="success">导出</el-button>
          </div>
        </div>
      </el-card>
      <div class="table-container">
        <el-table
          :data="dataSource"
          style="width: 100%"
          ref="table"
          v-loading="loading"
          :max-height="tableHeight"
        >
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="70"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="区域"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="date"
            align="center"
            label="企业名称"
          />
          <el-table-column
            prop="date"
            align="center"
            label="站点名称"
            width="200"
          />
          <el-table-column
            prop="date"
            align="center"
            label="预警开始时间"
            width="220"
          />
          <el-table-column
            prop="date"
            align="center"
            label="预警结束时间"
            width="220"
          />
          <el-table-column
            prop="date"
            align="center"
            label="预警持续时间"
            width="220"
          />
          <el-table-column
            prop="date"
            align="center"
            label="状态"
            width="200"
          />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Mixin } from '@/utils/mixin/Mixin'
import MultipleSiteTree from '@/components/zhhbTree/MultipleSiteTree'

export default {
  name: 'Index',
  mixins: [Mixin],
  components: {
    MultipleSiteTree
  },
  data() {
    return {
      disableMixinCreated: true,
      sitetreeshow: true,
      options: [{
        value: '选项1',
        label: '选项1'
      }, {
        value: '选项2',
        label: '选项2'
      }, {
        value: '选项3',
        label: '选项3'
      }, {
        value: '选项4',
        label: '选项4'
      }, {
        value: '选项5',
        label: '选项5'
      }],
      url: {
        list: 'qqq'
      }
    }
  },
  watch: {},
  created() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.content-container {
  .box-card {
    width: 100%;
    min-height: 90px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }
}

</style>
